<ion-slides #daySlider [loop]="true" [dir]="dir" (ionSlideDidChange)="onSlideChanged()">
    <ion-slide>
        <div class="dayview-allday-table">
            <div class="dayview-allday-label">{{allDayLabel}}</div>
            <ion-scroll scrollY="true" zoom="false" class="dayview-allday-content-wrapper">
                <table class="table table-bordered dayview-allday-content-table">
                    <tbody>
                    <tr>
                        <td class="calendar-cell" [ngClass]="{'calendar-event-wrap':views[0].allDayEvents.length>0}"
                            [ngStyle]="{height: 25*views[0].allDayEvents.length+'px'}"
                            *ngIf="0===currentViewIndex">
                            <div *ngFor="let displayEvent of views[0].allDayEvents; let eventIndex=index"
                                 class="calendar-event" tappable
                                 (click)="eventSelected(displayEvent.event)"
                                 [ngStyle]="{top: 25*eventIndex+'px',width: '100%',height:'25px'}">
                                <ng-template [ngTemplateOutlet]="dayviewAllDayEventTemplate"
                                             [ngOutletContext]="{displayEvent:displayEvent}">
                                </ng-template>
                            </div>
                        </td>
                        <td class="calendar-cell" *ngIf="0!==currentViewIndex">
                        </td>
                    </tr>
                    </tbody>
                </table>
            </ion-scroll>
        </div>
        <init-position-scroll *ngIf="0===currentViewIndex" class="dayview-normal-event-container"
                              [initPosition]="initScrollPosition" [emitEvent]="preserveScrollPosition"
                              (onScroll)="setScrollPosition($event)">
            <table class="table table-bordered table-fixed dayview-normal-event-table">
                <tbody>
                <tr *ngFor="let tm of views[0].rows; let i = index">
                    <td class="calendar-hour-column text-center">
                        {{hourColumnLabels[i]}}
                    </td>
                    <td class="calendar-cell" tappable (click)="select(tm.time, tm.events)">
                        <div [ngClass]="{'calendar-event-wrap': tm.events}" *ngIf="tm.events">
                            <div *ngFor="let displayEvent of tm.events" class="calendar-event" tappable
                                 (click)="eventSelected(displayEvent.event)"
                                 [ngStyle]="{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}">
                                <ng-template [ngTemplateOutlet]="dayviewNormalEventTemplate"
                                             [ngOutletContext]="{displayEvent:displayEvent}">
                                </ng-template>
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </init-position-scroll>
        <init-position-scroll *ngIf="0!==currentViewIndex" class="dayview-normal-event-container"
                              [initPosition]="initScrollPosition">
            <table class="table table-bordered table-fixed dayview-normal-event-table">
                <tbody>
                <tr *ngFor="let tm of views[0].rows; let i = index">
                    <td class="calendar-hour-column text-center">
                        {{hourColumnLabels[i]}}
                    </td>
                    <td class="calendar-cell">
                    </td>
                </tr>
                </tbody>
            </table>
        </init-position-scroll>
    </ion-slide>
    <ion-slide>
        <div class="dayview-allday-table">
            <div class="dayview-allday-label">{{allDayLabel}}</div>
            <ion-scroll scrollY="true" zoom="false" class="dayview-allday-content-wrapper">
                <table class="table table-bordered dayview-allday-content-table">
                    <tbody>
                    <tr>
                        <td class="calendar-cell" [ngClass]="{'calendar-event-wrap':views[1].allDayEvents.length>0}"
                            [ngStyle]="{height: 25*views[1].allDayEvents.length+'px'}"
                            *ngIf="1===currentViewIndex">
                            <div *ngFor="let displayEvent of views[1].allDayEvents; let eventIndex=index"
                                 class="calendar-event" tappable
                                 (click)="eventSelected(displayEvent.event)"
                                 [ngStyle]="{top: 25*eventIndex+'px',width: '100%',height:'25px'}">
                                <ng-template [ngTemplateOutlet]="dayviewAllDayEventTemplate"
                                             [ngOutletContext]="{displayEvent:displayEvent}">
                                </ng-template>
                            </div>
                        </td>
                        <td class="calendar-cell" *ngIf="1!==currentViewIndex">
                        </td>
                    </tr>
                    </tbody>
                </table>
            </ion-scroll>
        </div>
        <init-position-scroll *ngIf="1===currentViewIndex" class="dayview-normal-event-container"
                              [initPosition]="initScrollPosition" [emitEvent]="preserveScrollPosition"
                              (onScroll)="setScrollPosition($event)">
            <table class="table table-bordered table-fixed dayview-normal-event-table">
                <tbody>
                <tr *ngFor="let tm of views[1].rows; let i = index">
                    <td class="calendar-hour-column text-center">
                        {{hourColumnLabels[i]}}
                    </td>
                    <td class="calendar-cell" tappable (click)="select(tm.time, tm.events)">
                        <div [ngClass]="{'calendar-event-wrap': tm.events}" *ngIf="tm.events">
                            <div *ngFor="let displayEvent of tm.events" class="calendar-event" tappable
                                 (click)="eventSelected(displayEvent.event)"
                                 [ngStyle]="{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}">
                                <ng-template [ngTemplateOutlet]="dayviewNormalEventTemplate"
                                             [ngOutletContext]="{displayEvent:displayEvent}">
                                </ng-template>
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </init-position-scroll>
        <init-position-scroll *ngIf="1!==currentViewIndex" class="dayview-normal-event-container"
                              [initPosition]="initScrollPosition">
            <table class="table table-bordered table-fixed dayview-normal-event-table">
                <tbody>
                <tr *ngFor="let tm of views[1].rows; let i = index">
                    <td class="calendar-hour-column text-center">
                        {{hourColumnLabels[i]}}
                    </td>
                    <td class="calendar-cell">
                    </td>
                </tr>
                </tbody>
            </table>
        </init-position-scroll>
    </ion-slide>
    <ion-slide>
        <div class="dayview-allday-table">
            <div class="dayview-allday-label">{{allDayLabel}}</div>
            <ion-scroll scrollY="true" zoom="false" class="dayview-allday-content-wrapper">
                <table class="table table-bordered dayview-allday-content-table">
                    <tbody>
                    <tr>
                        <td class="calendar-cell" [ngClass]="{'calendar-event-wrap':views[2].allDayEvents.length>0}"
                            [ngStyle]="{height: 25*views[2].allDayEvents.length+'px'}"
                            *ngIf="2===currentViewIndex">
                            <div *ngFor="let displayEvent of views[2].allDayEvents; let eventIndex=index"
                                 class="calendar-event" tappable
                                 (click)="eventSelected(displayEvent.event)"
                                 [ngStyle]="{top: 25*eventIndex+'px',width: '100%',height:'25px'}">
                                <ng-template [ngTemplateOutlet]="dayviewAllDayEventTemplate"
                                             [ngOutletContext]="{displayEvent:displayEvent}">
                                </ng-template>
                            </div>
                        </td>
                        <td class="calendar-cell" *ngIf="2!==currentViewIndex">
                        </td>
                    </tr>
                    </tbody>
                </table>
            </ion-scroll>
        </div>
        <init-position-scroll *ngIf="2===currentViewIndex" class="dayview-normal-event-container"
                              [initPosition]="initScrollPosition" [emitEvent]="preserveScrollPosition"
                              (onScroll)="setScrollPosition($event)">
            <table class="table table-bordered table-fixed dayview-normal-event-table">
                <tbody>
                <tr *ngFor="let tm of views[2].rows; let i = index">
                    <td class="calendar-hour-column text-center">
                        {{hourColumnLabels[i]}}
                    </td>
                    <td class="calendar-cell" tappable (click)="select(tm.time, tm.events)">
                        <div [ngClass]="{'calendar-event-wrap': tm.events}" *ngIf="tm.events">
                            <div *ngFor="let displayEvent of tm.events" class="calendar-event" tappable
                                 (click)="eventSelected(displayEvent.event)"
                                 [ngStyle]="{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}">
                                <ng-template [ngTemplateOutlet]="dayviewNormalEventTemplate"
                                             [ngOutletContext]="{displayEvent:displayEvent}">
                                </ng-template>
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </init-position-scroll>
        <init-position-scroll *ngIf="2!==currentViewIndex" class="dayview-normal-event-container"
                              [initPosition]="initScrollPosition">
            <table class="table table-bordered table-fixed dayview-normal-event-table">
                <tbody>
                <tr *ngFor="let tm of views[2].rows; let i = index">
                    <td class="calendar-hour-column text-center">
                        {{hourColumnLabels[i]}}
                    </td>
                    <td class="calendar-cell">
                    </td>
                </tr>
                </tbody>
            </table>
        </init-position-scroll>
    </ion-slide>
</ion-slides>
